<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

          <div class="block">
            <el-form-item :label="$t('transfer.TransferDate')" prop="TransferDate">
              <el-date-picker v-model="TransferDate" clearable type="daterange" unlink-panels
                              range-separator="To" start-placeholder="Start date" end-placeholder="End date"
                              :shortcuts="shortcuts"/>
            </el-form-item>
            <el-form-item :label="$t('transfer.DocNo')">
              <el-input v-model="state.queryForm.DocNo" clearable
                        :placeholder="$t('transfer.DocNo')"/>
            </el-form-item>
            <el-form-item :label="$t('transfer.MaterialCode')">
              <MaterialSelect  v-model="state.queryForm.MaterialCode" style="width: 150px;"/>
            </el-form-item>
            <el-form-item :label="$t('transfer.OutWarehouse')">
               <WarehouseSelect v-model="state.queryForm.OutWarehouse" style="width: 150px;"/>
            </el-form-item>
            <el-form-item :label="$t('transfer.InWarehouse')">
              <WarehouseSelect v-model="state.queryForm.InWarehouse" style="width: 150px;"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search"  @click="query"> {{ $t('so.query') }}</el-button>
              <el-button icon="refresh"  @click="resetQuery">{{ $t('so.reset') }}</el-button>
            </el-form-item>
          </div>


        </el-form>

        <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                  style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
                  :header-cell-style="tableStyle.headerCellStyle">

          <el-table-column type="index" label="#" width="80"/>
          <el-table-column :label="$t('transfer.DocNo')" prop="docNo"  width="150"/>
          <el-table-column :label="$t('transfer.DocDate')" prop="docDate" width="180"/>
          <el-table-column :label="$t('transfer.BarCode')" prop="barCode" width="180"/>
          <el-table-column :label="$t('transfer.MaterialCode')" prop="materialCode" width="150"/>
          <el-table-column :label="$t('transfer.MaterialName')" prop="materialName" width="200"/>
          <el-table-column :label="$t('transfer.MaterialSpec')" prop="materialSpec" width="250"/>
          <el-table-column :label="$t('transfer.Qty')" prop="qty"/>
          <el-table-column :label="$t('transfer.Unit')" prop="unit"/>
          <el-table-column prop="splitFlag" :label="$t('transfer.SplitFlag')" show-overflow-tooltip width="80">
              <template #default="scope">
                <el-tag :type="scope.row.splitFlag === 'Y' ? 'success' : 'danger'" :effect="scope.row.splitFlag === 'Y' ? 'dark' : 'light'">
                {{ scope.row.splitFlag }}
              </el-tag>
              </template>
            </el-table-column>
          <el-table-column :label="$t('transfer.SplitBarCode')" prop="splitBarCode" width="180"/>
          <el-table-column :label="$t('transfer.OutWarehouse')" prop="outWarehouse" width="100"/>
          <el-table-column :label="$t('transfer.InWarehouse')" prop="inWarehouse" width="100"/>
          <el-table-column :label="$t('transfer.BatchNo')" prop="batchNo" width="100"/>
          <el-table-column :label="$t('transfer.JobId')" prop="jobId"/>
          <el-table-column :label="$t('transfer.K3AuditTime')" prop="k3AuditTime" width="180"/>
          <el-table-column :label="$t('transfer.Type')" prop="type"/>
        </el-table>

        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                    v-bind="state.pagination"/>
      </div>
  </div>
</template>


<script setup lang="ts">
import {BasicTableProps, useTable} from '/@/hooks/table';
import {GetDirectTransfers} from '/@/api/platform/report/DirectTransfer';
import {reactive, ref} from 'vue';
import {useI18n} from 'vue-i18n';
import MaterialSelect from '/@/components/mes/select/MaterialSelect.vue';
import WarehouseSelect from '/@/components/mes/select/WarehouseSelect.vue';
const {t} = useI18n();

const getYMD = (date: any) => {
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 yyyy-MM-dd 格式的字符串
  const formattedDate = `${year}-${month}-${day}`;

  return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const TransferDate = ref([endDate, today]);
// 搜索变量
const tableRef = ref();
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];


// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    TransferDateStart: TransferDate.value ? getYMD(TransferDate.value[0]) : '',
    TransferDateEnd: TransferDate.value ? getYMD(TransferDate.value[1]) : '',
  },
  pageList: GetDirectTransfers,
});

const {tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile} = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  TransferDate.value = [endDate, today];
  getDataList(false);
};

const query = () => {
  state.queryForm.TransferDateStart = TransferDate.value ? getYMD(TransferDate.value[0]) : '';
  state.queryForm.TransferDateEnd = TransferDate.value ? getYMD(TransferDate.value[1]) : '';
  getDataList();
};

</script>